<template>
  <div class="main-base item-row" :style="[$parent.globalStyle.baseStyle, customizeStyle.baseStyle]"
       v-if="customizeStyle && customizeMods">
    <div class="mod" v-if="customizeMods.before" :style="customizeStyle.beforeStyle">
      <component :is="item.type" :compId="item.id"
                 v-for="item in customizeMods.before" :key="item.id" v-if="item.show"/>
    </div>
    <div class="mod" v-if="customizeMods.after" :style="customizeStyle.afterStyle">
      <component :is="item.type" :compId="item.id"
                 v-for="item in customizeMods.after" :key="item.id" v-if="item.show"/>
    </div>
  </div>
</template>

<script>
import Head from './Head'
import Intro from './Intro'
import BaseInfo from './BaseInfo'
import Intention from './Intention'
import Description from './Description'
import Skill from './Skill'
import Experience from './Experience'
import Customize from './Customize'
import Moving from './Moving'

export default {
  name: 'Base',
  components: {
    Head,
    Intro,
    BaseInfo,
    Intention,
    Description,
    Skill,
    Experience,
    Customize,
    Moving
  },
  props: ['container', 'customizeStyle', 'customizeMods'],
  computed: {
    getCustomizeTitle () {
      return this.customizeStyle.title
    },
    getTitleDirStyle () {
      return {
        'display': 'flex',
        'flex-direction': this.customizeStyle.title.direction || 'column'
      }
    },
    getTitleDir () {
      return this.customizeStyle.title.direction
    }
  }
}
</script>

<style scoped lang="less">
  .main-base {
    box-sizing: border-box;
    width: 100%;
    display: flex;

    .mod > * {
      box-sizing: border-box;
      border: 1px dashed transparent;
      position: relative;
      padding-top: 20px;
      min-height: 53px;

      &:hover {
        border: 1px dashed deepskyblue;
      }
    }

    .mod > .main-info {
      padding-top: 0;
      min-height: 0;
    }
  }
</style>
